<script lang="ts" setup>
import {DesktopIcon,LockOnIcon} from 'tdesign-icons-vue-next'
import {MessagePlugin,FormProps} from "tdesign-vue-next";

const router=useRouter()

const formData:FormProps['data']=reactive({
  account:'admin',
  password:'123456'
})

const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功');
};

const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    router.push('/')
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning("登陆失败："+firstError);
  }
};

</script>

<template>
  <div class="w-full h-screen bg-[url('@/assets/image/login/login-bg.png')] bg-cover bg-no-repeat flex flex-col justify-between">
    <div class="w-full h-24 relative">
      <div class="top-1/2 left-1/4 absolute text-3xl flex items-center" style="transform: translate(-50%,-50%)">
        <img alt="" class="h-14 w-14 mr-3 block" src="../../assets/logo.png" style=""/>
        <span class="text-white">食品安全检测方法综合管理服务软件</span>
      </div>
    </div>
    <div class="w-full h-screen my-auto mx-0 flex items-center justify-between">
      <div class="w-4/6">
        <img alt="" class="w-full h-full" src="../../assets/image/login/login-l.png">
      </div>
      <div class="w-2/6">
        <div class="w-[450px] h-[500px] bg-white rounded-md" style="box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.3);">
          <div class="text-4xl font-extrabold text-[#007FE1] pt-16 w-full flex items-center justify-center tracking-extra-wide">
            系统登陆
          </div>
          <div class="flex justify-center items-center mt-16">
            <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit">

              <t-form-item name="account" class="w-[350px] custom-margin-bottom">
                <t-input size="large" v-model="formData.account" clearable placeholder="请输入账户名">
                  <template #prefix-icon>
                    <desktop-icon />
                  </template>
                </t-input>
              </t-form-item>

              <t-form-item name="password" class="w-[350px] custom-margin-bottom">
                <t-input size="large" v-model="formData.password" type="password" clearable placeholder="请输入密码">
                  <template #prefix-icon>
                    <lock-on-icon />
                  </template>
                </t-input>
              </t-form-item>

              <t-form-item>
                <t-button theme="primary" type="submit" block>登录</t-button>
              </t-form-item>

              <div class="mb-2 custom-item">
                <label class="flex items-center cursor-pointer text-[#9B9B9B] font-black">
                  <input type="checkbox" id="remember-me">
                  <span class="custom-checkbox"></span>
                  自动登录
                </label>
              </div>
            </t-form>
          </div>

        </div>
      </div>
    </div>
    <div class="w-full h-16 relative">
      <span class="footer">© 2023 哆啦好梦 Technology Co., Ltd.</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.t-input)  {
  height: 50px !important;
}
:deep(.t-button--variant-base){
  height: 50px !important;
}
.footer {
  @apply absolute top-[50%] left-[50%] text-white;
  transform: translate(-50%, -50%);
}
.custom-margin-bottom {
  margin-bottom: 35px; /* 根据需要调整数值 */
}
.custom-item input[type="text"], .custom-item input[type="password"] {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.custom-item input[type="checkbox"] {
  display: none;
}
.custom-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #007bff;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
}
.custom-checkbox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #007bff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
  border-radius: 2px;
}
input[type="checkbox"]:checked + .custom-checkbox::before {
  transform: translate(-50%, -50%) scale(1);
}
</style>